<template>
  <div class="base-info">
    <NavTitle title="流水线模板信息" />
    <div class="base-info-content">
      <a-form ref="formRef" class="form-container" label-align="right" :model="formState">
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item
              label="流水线模板名称"
              name="name"
              :rules="[{ required: true, message: '请输入流水线模板名称' }]"
            >
              <a-input
                v-model:value="formState.name"
                placeholder="请输入流水线模板名称"
                :disabled="actionType === PipelineOperationTypeCode.info"
                allowClear
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" v-if="actionType !== PipelineOperationTypeCode.add">
          <a-col :span="24">
            <a-form-item label="流水线模板ID">
              <a-input v-model:value="formState.uuid" placeholder="自动获取" :disabled="true" allowClear />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item label="组件类型" :rules="[{ required: true, message: '请选择组件类型' }]">
              <a-select
                v-model:value="formState.componentType"
                :options="componentData"
                placeholder="请选择组件类型"
                optionMode="options"
                allowClear
                :disabled="actionType === PipelineOperationTypeCode.info"
                :fieldNames="{ label: 'label', value: 'value' }"
              >
                <template #suffixIcon>
                  <CaretDownOutlined style="color: #6b84a5" />
                </template>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item label="编程语言" :rules="[{ required: true, message: '请选择编程语言' }]">
              <a-select
                v-model:value="formState.programLanguage"
                :options="languageOptinos"
                placeholder="请选择编程语言"
                optionMode="options"
                allowClear
                :disabled="actionType === PipelineOperationTypeCode.info"
                :fieldNames="{ label: 'name', value: 'value' }"
              >
                <template #suffixIcon>
                  <CaretDownOutlined style="color: #6b84a5" />
                </template>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { CaretDownOutlined } from '@ant-design/icons-vue';
import { usePipelineTemplateStore } from '@/store/modules/pipelineTemplate';
import { storeToRefs } from 'pinia';
import { cloneDeep } from 'lodash';
import { PipelineOperationTypeCode } from '@/enums/pipelineEnum';
import { componentData, languageOptinos } from '@/settings/commonSettings';
const pipelineTemplateStore = usePipelineTemplateStore();
const { baseInfo } = storeToRefs(pipelineTemplateStore);
const { setBaseInData } = pipelineTemplateStore;
const dataObject = ref<any>();
const formState = reactive<OperationManagement.BaseInfo>({
  uuid: '',
  name: '',
  componentType: undefined,
  programLanguage: undefined,
  creatorId: '',
  createTime: '',
});

const actionType: string = pipelineTemplateStore.getActionTypeData;

watch(
  baseInfo,
  (newVal) => {
    if (Object.keys(newVal).length > 0) {
      dataObject.value = cloneDeep(newVal);
      formState.uuid = dataObject.value.uuid;
      formState.name = dataObject.value.name;
      formState.componentType = dataObject.value.componentType;
      formState.programLanguage = dataObject.value.programLanguage;
      formState.creatorId = dataObject.value.creatorId;
      formState.createTime = dataObject.value.createTime;
    }
  },
  {
    immediate: true,
  },
);

watch(formState, (newVal) => {
  if (newVal) {
    setBaseInData({
      ...pipelineTemplateStore.getBaseInfoData,
      ...newVal,
    });
  }
});
</script>

<style lang="less" scoped>
.base-info {
  width: 100%;
  .base-info-content {
    padding-top: 40px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .form-container {
      width: 60%;
    }
  }

  :deep(.ant-form-item-label) {
    text-align: right;
    width: 120px;
  }
}
</style>
